<template>
  <div>
      <van-search
        class="searchItem"
        :value="searchValue"
        placeholder="请输入关键词…"
        background="#fff"
        use-action-slot
        @search="onSearch"
        @change="onchange"
      >
      </van-search>
      <van-tabs swipeable animated sticky :active="active">
        <van-tab title="本真人物">
          <div class="new_list" v-if="jurenwu.length>0">
            <a class="li" v-for="(item,index) in jurenwu" :key="index" :href="'/pages/character_details/main?id='+item.id+''">
              <!-- 第一篇文章 -->
              <div v-if="index==0">
                <div class="tit_box">
                  <span class="tit">{{item.title}}</span>
                  <div class="time"><span class="auName">{{item.author}}</span><span>{{item.creat}}</span></div>
                </div>
                <div class="img_box lg mt-1" :style="{backgroundImage:'url(' + item.image[0] + ')'}" v-if="item.image.length>=1"></div>
              </div>
              <!-- 不是第一篇文章 -->
              <div v-if="index!=0">
                <!-- 多图 -->
                <div v-if="item.image.length>1">
                  <div class="tit_box">
                    <span class="tit">{{item.title}}</span>
                    <div class="time"><span class="auName">{{item.author}}</span><span>{{item.creat}}</span></div>
                  </div>
                  <van-row class="mt-1" gutter="4">
                    <van-col span="8" v-for="(img,i) in item.image" :key="i">
                      <div class="img_box" :style="{backgroundImage:'url(' + img + ')'}"></div>
                    </van-col>
                  </van-row>
                </div>
                <!-- 无图 -->
                <div v-if="item.image.length<1">
                  <div class="tit_box">
                    <span class="tit">{{item.title}}</span>
                    <div class="time"><span class="auName">{{item.author}}</span><span>{{item.creat}}</span></div>
                  </div>
                </div>
                <!-- 单图 -->
                <van-row gutter="8" v-if="item.image.length==1">
                  <van-col span="16">
                    <div class="tit_box">
                      <span class="tit">{{item.title}}</span>
                      <div class="time"><span class="auName">{{item.author}}</span><span>{{item.creat}}</span></div>
                    </div>
                  </van-col>
                  <van-col span="8">
                    <div class="img_box" :style="{backgroundImage:'url(' + item.image[0] + ')'}"></div>
                  </van-col>
                </van-row>
              </div>
            </a>
          </div>
          <div class="nodata" v-else>
            <van-row>
              <van-col span="24">
                <van-icon custom-class="notIOCN" class="notIOCNWarp" name="notes-o" />
                <div class="notTXT">暂无数据</div>
              </van-col>
            </van-row>
          </div>
        </van-tab>
        <van-tab title="聚活动">
          <div class="new_list" v-if="juhuodong.length>0">
            <a class="li" v-for="(item,index) in juhuodong" :key="index" :href="'/pages/activity_details/main?id='+item.id+''">
              <!-- 第一篇 -->
              <div v-if="index==0">
                <div class="tit_box">
                  <span class="tit">{{item.title}}</span>
                  <div class="time"><span class="auName">{{item.author}}</span><span>{{item.creat}}</span></div>
                </div>
                <div class="img_box lg mt-1" :style="{backgroundImage:'url(' + item.image[0] + ')'}" v-if="item.image.length>0"></div>
              </div>
              <!-- 不是第一篇 -->
              <div v-if="index!=0">
                <!-- 多图 -->
                <div v-if="item.image.length>1">
                  <div class="tit_box">
                    <span class="tit">{{item.title}}</span>
                    <div class="time"><span class="auName">{{item.author}}</span><span>{{item.creat}}</span></div>
                  </div>
                  <van-row class="mt-1" gutter="4">
                    <van-col span="8" v-for="(img,i) in item.image" :key="i">
                      <div class="img_box" :style="{backgroundImage:'url(' + img + ')'}"></div>
                    </van-col>
                  </van-row>
                </div>
                <!-- 无图 -->
                <div v-if="item.image.length<1">
                  <div class="tit_box">
                    <span class="tit">{{item.title}}</span>
                    <div class="time"><span class="auName">{{item.author}}</span><span>{{item.creat}}</span></div>
                  </div>
                </div>
                <!--  单图 -->
                <van-row gutter="8" v-if="item.image.length==1">
                  <van-col span="16">
                    <div class="tit_box">
                      <span class="tit">{{item.title}}</span>
                      <div class="time"><span class="auName">{{item.author}}</span><span>{{item.creat}}</span></div>
                    </div>
                  </van-col>
                  <van-col span="8">
                    <div class="img_box" :style="{backgroundImage:'url(' + item.image[0] + ')'}"></div>
                  </van-col>
                </van-row>
              </div>
            </a>
          </div>
          <div class="nodata" v-else>
            <van-row>
              <van-col span="24">
                <van-icon custom-class="notIOCN" class="notIOCNWarp" name="notes-o" />
                <div class="notTXT">暂无数据</div>
              </van-col>
            </van-row>
          </div>
        </van-tab>
        <van-tab title="聚公告">
          <div class="new_list" v-if="jutonggao.length > 0">
            <a class="li" v-for="(item,index) in jutonggao" :key="index" :href="'/pages/notice_details/main?id='+item.id+''">
              <!-- 是第一张的 单图 -->
              <div v-if="index==0">
                <div class="tit_box">
                  <span class="tit">{{item.title}}</span>
                  <div class="time"><span class="auName">{{item.author}}</span><span>{{item.creat}}</span></div>
                </div>
                <div class="img_box lg mt-1" :style="{backgroundImage:'url(' + item.image[0] + ')'}" v-if="item.image.length>0"></div>
              </div>
              <div v-if="index!=0">
                <!-- 不是第一张的 多图 -->
                <div v-if="item.image.length>1">
                  <div class="tit_box">
                    <span class="tit">{{item.title}}</span>
                    <div class="time"><span class="auName">{{item.author}}</span><span>{{item.creat}}</span></div>
                  </div>
                  <van-row class="mt-1" gutter="4">
                    <van-col span="8" v-for="(img,i) in item.image" :key="i">
                      <div class="img_box" :style="{backgroundImage:'url(' + img + ')'}"></div>
                    </van-col>
                  </van-row>
                </div>
                <!-- 不是第一张的 无图 -->
                <div v-if="item.image.length<1">
                  <div class="tit_box">
                    <span class="tit">{{item.title}}</span>
                    <div class="time"><span class="auName">{{item.author}}</span><span>{{item.creat}}</span></div>
                  </div>
                </div>
                <!-- 不是第一张的  单图 -->
                <van-row gutter="8" v-if="item.image.length==1">
                  <van-col span="16">
                    <div class="tit_box">
                      <span class="tit">{{item.title}}</span>
                      <div class="time"><span class="auName">{{item.author}}</span><span>{{item.creat}}</span></div>
                    </div>
                  </van-col>
                  <van-col span="8">
                    <div class="img_box" :style="{backgroundImage:'url(' + item.image[0] + ')'}"></div>
                  </van-col>
                </van-row>
              </div>
            </a>
          </div>
          <div class="nodata" v-else>
            <van-row>
              <van-col span="24">
                <van-icon custom-class="notIOCN" class="notIOCNWarp" name="notes-o" />
                <div class="notTXT">暂无数据</div>
              </van-col>
            </van-row>
          </div>
        </van-tab>
      </van-tabs>
  </div>
  
</template>
<script>
import {integral, views} from '../../utils/utils.js'
export default {
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 增加积分
      this.sharpePage(this.$root.$mp.query.id, 3)
    } else {
      this.sharpePage(this.$root.$mp.query.id, 4)
    }
    return {
      title: '搜索结果',
      imageUrl: '/images/a.png',
      path: 'pages/home/main?id=' + this.$root.$mp.query.id
    }
  },
  data () {
    return {
      active: '',
      searchValue: '',
      jutonggao: [], // 聚动态文章
      jurenwu: [], // 本真人物文章
      juhuodong: [] // 聚活动文章
    }
  },
  components: {
  },
  methods: {
    // 积分增加， 更新 分享、浏览 、转发数量，增加积分
    // type:share 更新分享数   views  更新浏览数 forwarding 更新转发数
    getIntegral (type = 2) {
      let _this = this
      let id = _this.$root.$mp.query.id
      // 增加积分
      integral(id, type)
      // 增加统计数量  views
      views(id, 'views')
    },
    // 1.签到 2.阅读文章 3.转发文章 4.分享小程序
    sharpePage (id, type = 3) {
      // 增加积分
      integral(id, type)
      // 增加统计数量 share
      views(id, 'share')
    },
    onSearch (val) {
      this.jutonggao = []
      this.jurenwu = []
      this.juhuodong = []
      this.searchValue = val.mp.detail
      this.search(val.mp.detail)
    },
    onchange (val) {
      this.searchValue = val.mp.detail
    },
    search (val) {
      let _this = this
      wx.request({
        url: this.apiUrl + 'api/search?page=1&q=' + this.searchValue,
        success (res) {
          let data = res.data
          if (data.code === 200) {
            data.data.forEach(element => {
              switch (element.category_id) {
                case 1:
                  _this.jutonggao.push(element)
                  break
                case 3:
                  _this.jurenwu.push(element)
                  break
                case 4:
                  _this.juhuodong.push(element)
                  break
                default:
                  break
              }
              if (_this.jurenwu.length > 0) {
                _this.active = 0
              } else {
                if (_this.juhuodong.length > 0) {
                  _this.active = 1
                } else {
                  if (_this.jutonggao.length > 0) {
                    _this.active = 2
                  }
                }
              }
            })
          }
        }
      })
    }
  },
  mounted () {
    if (this.$root.$mp.query.q !== undefined) {
      this.searchValue = this.$root.$mp.query.q
      this.search(this.searchValue)
    }
  }
}
</script>
<style>
van-row{ display:block;}
/*搜索*/
.searchItem {
  width: 100%;
}
.van-search{
  background-color: #fff!important;
  padding: 20px 1px 20px 20px!important;
}

.van-search__field{
  padding: 0 0; 
  background-color: #f1f1f1!important;
}
.van-search__field .van-cell{
  background-color: #f1f1f1!important;
  
}
.van-search__field .van-cell .van-icon{
  top: 1px;
  margin-right: 2px;
}
/*切换*/
.van-ellipsis{ font-size: 16px;}

</style>
